<template>
  <!-- 标签内主要用于放置页面的html结构 -->
  <div>
    <!-- 导航栏 -->
    <header
      class="d-flex flex-wrap align-items-center justify-content-center py-3 border-bottom"
    >
      <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
        <li>
          <a href="#" class="nav-link px-2 link-secondary">留言板</a>
        </li>
        <li>
          <a href="#" class="nav-link px-2 link-secondary">热点文章</a>
        </li>
      </ul>
    </header>
    <!-- 导航栏结束 -->

    <!-- 页面容器 -->
    <div class="container">
      <main>
        <!-- 文章内容 -->
        <Content :article="article"></Content>
        <!-- 留言列表 -->
        <Comments :messageList="messageList" :avatar_male="avatar_male" :avatar_female="avatar_female"></Comments>
        <!-- 发表留言 -->
        <submit-comments :submit="submit" :promptMsg="promptMsg" :message="message"></submit-comments>
      </main>
    </div>

    <!-- 底部栏 -->
    <footer class="py-5 text-muted text-center text-small">
      <p>© 2020-2032</p>
    </footer>
    <!-- <div>更新 {{count}} <button @click="gengxin">更新数据</button></div> -->
  </div>
</template>

<script setup>
//#region 按需引入
import { ref, reactive, computed, watch } from "vue";
import "./assets/css/bootstrap.css";
import avatar_male from "./assets/img/male.png"; //导入男性头像图片
import avatar_female from "./assets/img/female.png"; //导入女性头像图片
import Comments from "./components/Comments.vue";
import Content from "./components/Content.vue";
import SubmitComments from "./components/SubmitComments.vue";
//#endregion

//#region onBeforeUpdate 和 onBeforeUpdate
// onBeforeUpdate(()=>{
//     console.log('onBeforeUpdate',count.value);
//     alert('准备更新')
// })
// onUpdated(()=>{
//     console.log('onUpdated',count.value);
// })
// 创建变量
// let count =ref(0)
// function gengxin(){
//     count.value++;
// }
//#endregion
const article = ref(
  " Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。欢迎广大开发者对Vue留下宝贵的建议。"
);
const styleclass = reactive({
  avatar_male,
  avatar_female,
});
// 渲染的数据列表
const messageList = ref([
  {
    id: 110,
    name: "李小萌",
    email: "",
    content: "Vue是一个如此优秀的框架,值得我们深入学习。",
    gender: 0, //性别，0代表女性，1代表男性
  },
  {
    id: 111,
    name: "王小跳",
    email: "",
    content: "Vue3我觉得很优雅,特别适合移动端开发。",
    gender: 1,
  },
  {
    id: 112,
    name: "张全全",
    email: "",
    content:
      "Vue真心让我省去了很多不必要的功夫,也很适合边开发边深入探究,这可能是这个框架最大的好处",
    gender: 1,
  },
]);

// 创建信息
const message = reactive({
  id: "",
  name: "",
  email: "",
  content: "",
  gender: "1",
});

// 提交信息预览
const tip = computed({
  //计算属性
  get() {
    if (message.name == "" && message.email == "") return;
    let gender = message.gender == 0 ? "女" : "男";
    return message.name + "," + gender + "," + message.email;
  },
  set(val) {
    let arr = val.split(",");
    message.name = arr[0];
    message.gender = arr[1] == "女" ? "0" : "1";
    message.email = arr[2];
  },
});
const promptMsg = ref("");
watch(
  message,
  (newVal, oldVal) => {
    if (newVal.content.length <= 20) {
      promptMsg.value = "输入内容不少于20个字符";
    } else if (newVal.content.length > 140) {
      promptMsg.value = "输入内容不超过140个字符";
    } else {
      promptMsg.value = "您已输入" + newVal.content.length + "个字符";
    }
  },
  { immediate: true, deep: true }
);

function submit() {
  if (
    message.name.trim() == "" ||
    message.email.trim() == "" ||
    message.content.trim() == ""
  ) {
    alert("信息输入不全，请输入完整的信息");
    return;
  }
  let messageInfo = {
    id: Date.now(),
    name: message.name,
    email: message.email,
    content: message.content,
    gender: message.gender,
  };
  console.log("按键事件触发");
  // console.log(typeof(messageList));
  // console.log();
  // 将新数据推送到信息列表中
  messageList.value.push(messageInfo);
  // 清空表单
  message.name = "";
  message.email = "";
  message.content = "";
  alert("信息添加成功");
}
//
</script>

<style>
/* 主要放置页面所需的css文件 */
.line {
  display: inline-block;
  width: 4px;
  height: 24px;
  background: linear-gradient(#20c997, #198754);
  vertical-align: middle;
  margin-right: 10px;
  position: relative;
  top: -2px;
}

.title:hover {
  color: #198754;
  cursor: pointer;
}
</style>
